<template>
    <div class="comment">
        <!-- 一级评论组件 -->
        <div class="left">
            <img :src="comment?.fromUserAvatarUrl" alt="">
            <div class="username">
                <span>{{ comment?.fromUserName }}：</span>
            </div>
        </div>
        <div class="right">
            <!-- effect="dack" -->
            <!-- :content="comment.content" -->
            <!--  placement="top" -->
            <!-- <el-tooltip class="item"> -->
            <!-- <el-button>上边</el-button> -->
            <div class="content">{{ comment?.content }}</div>
            <div class="time">{{ comment?.createdDt }}</div>
            <!-- </el-tooltip> -->

        </div>
    </div>
</template>
<script>
export default {
    name: 'Comment',
    components: {

    },
    mixins: [],
    props: ['comment'],
    data() {
        return {

        }
    },
    computed: {

    },
    watch: {

    },
    mounted() {
    },
    methods: {

    }
};
</script>
<style lang='less' scoped>
.comment {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;

    .left {
        display: flex;
        align-items: center;

        img {
            width: 45px;
            height: 45px;
            border-radius: 50%;
        }

        .username {
            margin-left: 10px;
        }
    }

    .right {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .content {
            width: 650px;
            overflow: hidden;
            text-overflow: ellipsis;
            text-wrap: nowrap;
            background-color: white;
        }

        .time {
            color: #333;
            font-size: 13px;
        }
    }
}
</style>